<script setup lang="ts">
import { useSlots } from 'vue'
const slots = useSlots()
// console.log('打印插槽的信息：', slots.filter)
</script>
<template>
  <div class="box">
    <!-- 筛选盒模型 -->
    <div class="boxFilter" v-if="slots.filter">
      <slot name="filter"></slot>
    </div>
    <!-- 筛选盒模型 -->

    <!-- 内容盒模型 -->
    <div class="boxTable">
      <slot></slot>
    </div>
    <!-- 内容盒模型 -->
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  .boxFilter {
    width: 100%;
    padding: 16px;
    background-color: #fff;
    padding-bottom: 0;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .boxTable {
    padding: 16px;
    overflow: hidden;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
